<template>
  <div class="info-wrapper">
    <el-row class="container">
      <div class="title">店铺名称：</div>
      <div>{{ info.shop_name }}</div>
    </el-row>
    <el-row class="container">
      <div class="title">logo：</div>
      <cover :cover="info.shop_list_pic" :ratio="coverRatio" @cover="handleCoverChange" />
    </el-row>
    <el-row class="container">
      <div class="title">商家轮播图：</div>
      <carousel :carousel="info.shop_pics" :ratio="ratio" @carousel="handleChangeCarousel" />
    </el-row>
    <el-row class="container">
      <div class="title">主营类目：</div>
      <div>{{ info.name }}</div>
    </el-row>
    <el-row class="container">
      <div class="title">分类：</div>
      <div>{{ info.cate_name }}</div>
    </el-row>
    <el-row class="container">
      <div class="title">平均消费：</div>
      <el-input v-model="info.avg_price" type="text" placeholder="请输入平均消费值" class="input-container" />
      <div style="margin-left: 10px">元</div>
    </el-row>
    <el-row class="container">
      <div class="title">营业时间：</div>
      <el-input v-model="info.business_hours" type="text" placeholder="请输入营业时间" class="input-container" />
    </el-row>
    <el-row class="container">
      <div class="title">基础设施：</div>
      <div v-for="(item, index) of facility" :key="index" class="timer-item">
        <el-checkbox v-model="item.check" :label="item.name" border />
      </div>
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>
<script>
import { getStoredValue as getDatumInfo, storedValue as DatumInfo } from '@/api/params'
import Carousel from '@/components/carousel'
import Cover from '@/components/cover'
export default {
  name: 'DatumInfo',
  components: {
    Carousel,
    Cover
  },
  data() {
    return {
      info: {},
      facility: [{ name: 'wifi', check: false }, { name: '泊车', check: false }, { name: '餐饮', check: false }],
      coverRatio: '305*230',
      ratio: '1080*605'
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const res = await getDatumInfo()
      res.data.store.shop_list_pic = res.data.store.shop_list_pic ? res.data.store.shop_list_pic : ''
      res.data.store.shop_pics = res.data.store.shop_pics ? res.data.store.shop_pics : []
      this.info = res.data.store
      const array = [Boolean(this.info.has_wifi), Boolean(this.info.has_park), Boolean(this.info.has_cater)]
      this.initFacility(array)
    },
    async handleSave() {
      const type = 'shop'
      const { avg_price, business_hours, shop_pics, shop_list_pic } = this.info
      const has_wifi = +this.facility[0].check
      const has_park = +this.facility[1].check
      const has_cater = +this.facility[2].check
      const flag = this.validity()
      if (flag) {
        const shop_pics_copy = shop_pics.join('|')
        await DatumInfo({ type, avg_price, business_hours, has_wifi, has_park, shop_pics: shop_pics_copy, has_cater, shop_list_pic })
        this.$message.success({
          message: '保存成功',
          duration: 1000
        })
      }
    },
    initFacility(array) {
      const names = ['wifi', '泊车', '餐饮']
      const result = []
      array.map((item, index) => {
        result.push({ name: names[index], check: item })
      })
      this.facility = result
    },
    validity() {
      const { info } = this
      if (!info.shop_list_pic.length) {
        this.$message.warning({
          message: '请选择封面图片'
        })
        return false
      }
      if (!info.shop_pics.length) {
        this.$message.warning({
          message: '请选择轮播图片'
        })
        return false
      }
      if (info.avg_price.trim() === '') {
        this.$message.warning({
          message: '平均消费不能为空'
        })
        return false
      }
      if (info.business_hours.trim() === '') {
        this.$message.warning({
          message: '营业时间不能为空'
        })
        return false
      }
      return true
    },
    handleCoverChange(pic) {
      this.info.shop_list_pic = pic
    },
    handleChangeCarousel(pics) {
      this.info.shop_pics = pics
    }
  }
}
</script>

<style lang="scss" scoped>
.info-wrapper {
  width: 100%;
  padding: 20px;
  padding-top: 0;
  box-sizing: border-box;
  .container{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title {
      width: 140px;
    }
    .input-container{
      width: 400px;
    }
    .timer-item{
      margin-right: 20px;
    }
  }
}
</style>
